<template>
	<view :style="{width:'100%',
	backgroundImage:`url(${jgbjURL})`,
	backgroundSize:'cover',
	alignItems: 'center',
	// padding: '30rpx',
	// paddingTop: '30rpx',
	fontSize: '30rpx',
	animation: 'fadeIn 0.8s ease-in-out'}">

		<view class="container">
			<!-- 内容区域 -->
			<!-- 显示标题区域 -->
			<view class="ShowTitle">
				<!-- 显示提交时间 -->
				<view class="ShowTitle-1" @click="rotateTitlea" :class="{'rotateda':rorareda}">
					提交时间: {{ submitTime }}
				</view>
				<!-- 显示用时 -->
				<view class="ShowTitle-2" @click="rotateTitleb" :class="{'rotatedb':roraredb}">
					用时: {{ usedTime }}
				</view>
			</view>
		</view>

		<!-- 分数区域 -->
		<view class="Score">
			<!-- 分数标题 -->
			<view class="ScoreTitle" :style="{backgroundImage: `url(${BlueURL})`,}">
				因子得分
			</view>
			<!-- 最后分数展示 -->
			<view class="ScoreLast">
				<view style="text-indent: 1em;">
					总分
				</view>
				<!-- 显示分数 -->
				<view>
					{{points}}
				</view>
			</view>
		</view>

		<!-- 测评结果展示区域 -->
		<view class="Third-div">
			<!-- 测评结果标题 -->
			<view class="ResultTitle" :style="{backgroundImage: `url(${BlueURL})`,}">
				测评结果
			</view>

			<!-- 结果展示内容 -->
			<view class="Result">
				<view class="bgk1">
					<!-- 总分标签 -->
					<view>
						<view class="ZongFen" number-of-lines="1">总分</view>
					</view>
					<view style="min-height: 40vh; position: relative;">
						<view style="position: absolute;  top: 18vh; left: 25vw;" v-show="aiText?false:true">
							<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
						</view>
						{{aiText}}
					</view>
					<view class="bgk2">
						<careerResult :score="score"></careerResult>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		requestTaskIMGint
	} from '../../../../api/AIapi/AIapi'
	import careerResult from '@/pages/psychologyModel/drawingAnalysis/drawing/drawingEchar.vue'
	export default {
		components: {
			careerResult
		},
		data() {
			return {
				BlueURL: this.$baseURL + '/profile/upload/2025/05/10/Blue_20250508100002A087_20250510150725A056.png',
				jgbjURL: this.$baseURL + '/profile/upload/2025/05/10/jgbj_20250507101024A028_20250510150221A029.png',
				rorareda: true,
				roraredb: true,
				aiText: "",
				points: '',
				score: [],
				submitTime: null,
				usedTime: null,
				dhdata: {
					inputs: {},
					dhimg: "", // 存储显示的图片URL
					query: "",
					response_mode: "streaming",
					conversation_id: "",
					user: "abc-123"
				},
				isTablet: uni.getSystemInfoSync().windowWidth >= 768 // 判断是否为平板尺寸
			}
		},
		onLoad() {
			const now = new Date()
			this.submitTime = this.formatDate(now)
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('result', (data) => {
				console.log(data)
				this.dhdata.dhimg = data.aiUrl;
				console.log(this.dhdata.dhimg)
				this.usedTime = data.usedTime
				this.dhdata.query = data.query
				this.requestTest()
			});
			// 监听窗口尺寸变化，实时调整布局
			uni.onWindowResize((res) => {
				this.isTablet = res.size.windowWidth >= 768;
			});
		},
		methods: {
			requestTest() {
				let isJsonMode = false;
				let jsonBuffer = '';
				let aiTextTemp = '';
				let bracketCount = 0; // 用于检测嵌套 []

				requestTaskIMGint(this.dhdata, (res) => {
					if (res === "streamingEND") {
						console.log("回答结束");
						uni.hideLoading();
						uni.showToast({
							title: '分析完成',
							icon: 'success'
						});
						return;
					}

					for (let i = 0; i < res.length; i++) {
						const char = res[i];

						if (isJsonMode) {
							jsonBuffer += char;

							if (char === '[') {
								bracketCount++;
							} else if (char === ']') {
								bracketCount--;
							}

							// 只有当所有括号都闭合时才尝试解析
							if (bracketCount === 0 && char === ']') {
								isJsonMode = false;

								try {
									const parsed = JSON.parse(jsonBuffer);
									if (Array.isArray(parsed)) {
										this.score = parsed;
										// 👇 新增逻辑：每个数 × 0.133 然后相加
										const numArray = parsed.map(Number);
										let total = 0;

										for (let i = 0; i < numArray.length; i++) {
											total += numArray[i] * 0.2;
										}

										this.points = total.toFixed(1); // 保留一位小数
										//总分不会超过100
										this.points = Math.min(100, total).toFixed(1);
										console.log("points 已更新为:", this.points);
										console.log("有效数组已设置", this.score);
									} else {
										throw new Error("解析结果不是数组");
									}
								} catch (e) {
									console.error("JSON 解析失败或格式错误", jsonBuffer, e);
								}
							}
						} else {
							if (char === '[') {
								// 进入 JSON 模式，但不显示这个 [
								isJsonMode = true;
								jsonBuffer = '[';
								bracketCount = 1; // 初始化计数器为 1
							} else {
								// 普通文本模式下正常显示
								aiTextTemp += char;
								this.aiText = aiTextTemp;
							}
						}
					}
				});
			},

			rotateTitlea() {
				this.rorareda = !this.rorareda
			},
			rotateTitleb() {
				this.roraredb = !this.roraredb
			},
			formatDate(date) {
				// 格式化时间为 2025-03-28 10.58 格式
				const y = date.getFullYear()
				const m = (date.getMonth() + 1).toString().padStart(2, '0')
				const d = date.getDate().toString().padStart(2, '0')
				const h = date.getHours().toString().padStart(2, '0')
				const min = date.getMinutes().toString().padStart(2, '0')
				return `${y}-${m}-${d} ${h}.${min}`
			},
		},
	}
</script>

<style>
	/* 全局段落文字大小 */
	p {
		font-size: 28rpx;
		color: #333;
	}

	.container {
		max-width: 678px;
		/* 平板/大屏最大宽度 */
		margin: 0 auto;
		/* 水平居中 */
	}

	/* 顶部信息栏 */
	.ShowTitle {
		width: 100%;
		display: flex;
		/* 弹性布局 */
		justify-content: space-between;
		/* 两端对齐 */
		height: auto;
		/* 高度自适应 */
		margin-top: 40rpx;
	}

	/* 时间显示模块 */
	.ShowTitle-1,
	.ShowTitle-2 {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		animation: fadeIn 1s ease-in-out;
		transition: transform 1s;
	}

	.ShowTitle-1 {
		width: 65%;
		background: #d5e6f8;
		color: #2e8ee4;
		border-radius: 20rpx 0 0 20rpx;
	}

	.ShowTitle-2 {
		width: 35%;
		background: #47a0f2;
		color: #ffffff;
		border-radius: 0 20rpx 20rpx 0;
	}

	/* 旋转动画 */
	.ShowTitle-1.rotateda,
	.ShowTitle-2.rotatedb {
		transform: rotateY(360deg);
	}

	/* 分数板区域 */
	.Score {
		width: 100%;
		max-width: 1024rpx;
		background-color: #ffffff;
		padding: 30rpx;
		margin: 40rpx auto;
		/* margin-bottom: 30rpx; */
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		animation: fadeIn 1s ease-in-out;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.Score:hover {
		transform: scale(1.01);
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
	}

	/* 分数标题 */
	.ScoreTitle {
		height: 80rpx;
		line-height: 80rpx;
		font-weight: bold;
		padding-left: 60rpx;
		/* background-image: url('@/static/Blue.png'); */
		background-repeat: no-repeat;
		background-size: 28rpx 28rpx;
		background-position: 20rpx center;
		margin-bottom: 30rpx;
		color: #000000;
		font-size: 32rpx;
	}

	/* 总分数栏 */
	.ScoreLast {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f3f8fe;
		padding: 20rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #444;
		box-shadow: inset 0 0 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 结果分析区域 */
	.Third-div {
		width: 100%;
		max-width: 1024rpx;
		background-color: #ffffff;
		padding: 30rpx;
		margin: 0 auto 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
		animation: fadeIn 1.2s ease-in-out;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.Third-div:hover {
		transform: scale(1.02);
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
	}

	/* 测评结果标题 */
	.ResultTitle {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-weight: bold;
		padding-left: 60rpx;
		/* background-image: url('@/static/Blue.png'); */
		background-repeat: no-repeat;
		background-size: 28rpx 28rpx;
		background-position: 20rpx center;
		margin-bottom: 30rpx;
		color: #000000;
		font-size: 32rpx;
	}

	/* 结果文字容器 */
	.Result {
		width: 100%;
		background-color: #f4faff;
		padding: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		line-height: 1.8;
		color: #333;
	}

	/* 总分标签样式 */
	.ZongFen {
		display: inline-block;
		padding: 12rpx 24rpx;
		background-color: #6bb8fe;
		color: #fff;
		border-radius: 24rpx 0rpx;
		font-size: 26rpx;
		line-height: 1;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 分析文字部分 */
	.bgk1 {
		background-color: #f3f8fe;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 30rpx;
		animation: fadeIn 1.4s ease-in-out;
	}

	/* 雷达图区域 */
	.bgk2 {
		background: linear-gradient(to left bottom, #e0f7ff, #ffffff);
		width: 100%;
		/* 占满父容器宽度 */
		padding: 30rpx;
		/* 内边距可适当调整 */
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		/* height: 600rpx; */
		/* 增大雷达图区域的高度 */
		animation: zoomIn 1s ease-in-out;
	}

	/* 动画关键帧定义 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(2rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes zoomIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>